<template>
    <div>
        <div class="container">
            <div class="main">

                <div class="login">
                    <h1>电商后台管理系统</h1>
                    <div class="item user">
                        <i class="fa fa-user"></i>
                        <input type="text" placeholder="请输入用户名或者邮箱" v-model="userForm.username"/>
                    </div>

                    <div class="item password">
                        <i class="fa fa-unlock-alt"></i>
                        <input type="password" placeholder="请输入密码" v-model="userForm.password"/>
                    </div>
                    <div class="item forget">
                        <a href="regeist.html">注册用户</a>
                    </div>
                    <div class="item submit">
                        <el-button type="primary" class="btn" @click="login()">登录</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    module.exports = {
        data() {
            return {
                userForm: {
                    username: '',
                    password: ''
                }
            }
        },
        methods: {
            login() {
                // console.log("你好！")
                console.log(this.userForm.username)
                console.log(this.userForm.password)
                axios.post('/user/login', this.userForm).then((res) => {
                    console.log(res);
                    if(res.data.code===100){
                        location.href="index.html";
                    }
                    else {
                        alert("账号或密码错误")
                    }
                })
            }
        }
    };
</script>

<style scoped>

    .main {
        /* border: 1px solid black; */
        width: 800px;
        height: 700px;
        margin: 0 auto;

        /* position: relative; */
    }

    .main h1 {
        text-align: center;
        position: relative;
        top: 5%;
    }

    .fa {
        font-size: 30px;
    }

    .login {
        /* border: 1px solid red; */
        width: 100%;
        height: 500px;
        /* padding:10px 60px; */
        margin: 10px auto;
        position: relative;
        border: 1px solid pink;
        border-radius: 50px;
        background: url(../imgs/cxk.png);
        background-size: 50% 120%;
        top: 20%;


    }

    input {
        width: 350px;
        height: 35px;
    }

    .password {
        margin-top: -50px;
    }

    .item {
        position: absolute;
        margin-left: 200px;
        top: 20%;
    }

    .password {
        margin-top: 100px;
    }

    .user {
        margin-top: 50px;
    }

    .submit {
        margin-top: 175px;
        /* background-color: black; */
        width: 200px;
        margin-left: 230px;
        color: wheat;
    }

    .forget {
        margin-top: 150px;
        margin-left: 230px;
    }

    .container {
        width: 100%;
        height: 100%;
        position: absolute;
        background-image: linear-gradient(200deg, #e3c5eb, #a9c1ed);
        left: 0%;
        top: 0%;


    }

    .btn {
        width: 174%;
    }


</style>
